<script setup>
import { useRouter } from 'vue-router';
import { usePostListStore } from '@/stores/post';
import { useUserListStore, useUserStore } from '@/stores/user';
import { ref } from 'vue'


const router = useRouter()
const user = useUserStore()
const fanList = ref([])
const userList = useUserListStore()
user.userInfo.fans.forEach(item => {
    fanList.value.push(userList.getUserInfo(item))
})

function toback() {
    router.back()
}
// user.userInfo.concren.indexOf(item.userid)
</script>

<template>
    <div class="main">
        <van-nav-bar title="我的粉丝" left-text="返回" left-arrow @click-left="toback" />
        <div class="content">
            <div v-for="item in fanList" class="box">
                <img :src="item.img" alt="">
                <span>{{ item.username }}</span>
                <div>{{ user.userInfo.concern.indexOf(item.userid) == -1 ? '+关注' : '相互关注' }}</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px gray solid;

    img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 20px;
    }

    span {
        font-size: 20px;
        font-weight: bold;
        flex: 1;
    }

    div {
        border: 1px red solid;
        color: red;
        padding: 5px;
        font-size: 16px;
        border-radius: 6px;
        width: 80px;
        text-align: center;
    }
}
</style>